<!DOCTYPE html>
<html lang="en" data-darkmode="{{ get_darkmode_state() }}">

  <head>
    <meta charset="utf-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <meta name="description" content="Self hosted website change detection." >
    <title>Change Detection{{extra_title}}</title>
    <link rel="alternate" type="application/rss+xml" title="Changedetection.io » Feed{% if active_tag %}- {{active_tag}}{% endif %}" href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}" >
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='pure-min.css')}}" >
    <link rel="stylesheet" href="{{url_for('static_content', group='styles', filename='styles.css')}}" >
    {% if extra_stylesheets %}
      {% for m in extra_stylesheets %}
        <link rel="stylesheet" href="{{ m }}?ver=1000" >
      {% endfor %}
    {% endif %}

    <link rel="apple-touch-icon" sizes="180x180" href="{{url_for('static_content', group='favicons', filename='apple-touch-icon.png')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{url_for('static_content', group='favicons', filename='favicon-32x32.png')}}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{url_for('static_content', group='favicons', filename='favicon-16x16.png')}}">
    <link rel="manifest" href="{{url_for('static_content', group='favicons', filename='site.webmanifest')}}">
    <link rel="mask-icon" href="{{url_for('static_content', group='favicons', filename='safari-pinned-tab.svg')}}" color="#5bbad5">
    <link rel="shortcut icon" href="{{url_for('static_content', group='favicons', filename='favicon.ico')}}">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <style>
      body::before {
        background-image: url({{url_for('static_content', group='images', filename='gradient-border.png') }});
      }
    </style>
    <script src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
  </head>

  <body>
    <div class="header">
      <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">
        {% if has_password and not current_user.is_authenticated %}
          <a class="pure-menu-heading" href="https://changedetection.io" rel="noopener">
            <strong>Change</strong>Detection.io</a>
        {% else %}
          <a class="pure-menu-heading" href="{{url_for('index')}}">
            <strong>Change</strong>Detection.io</a>
        {% endif %}
        {% if current_diff_url %}
          <a class="current-diff-url" href="{{ current_diff_url }}">
            <span style="max-width: 30%; overflow: hidden">{{ current_diff_url }}</span></a>
        {% else %}
          {% if new_version_available and not(has_password and not current_user.is_authenticated) %}
            <span id="new-version-text" class="pure-menu-heading">
              <a href="https://changedetection.io">A new version is available</a>
            </span>
          {% endif %}
        {% endif %}

        <ul class="pure-menu-list" id="top-right-menu">
          {% if current_user.is_authenticated or not has_password %}
            {% if not
            current_diff_url %}
              <li class="pure-menu-item">
                <a href="{{ url_for('tags.tags_overview_page')}}" class="pure-menu-link">GROUPS</a>
              </li>
              <li class="pure-menu-item">
                <a href="{{ url_for('settings_page')}}" class="pure-menu-link">SETTINGS</a>
              </li>
              <li class="pure-menu-item">
                <a href="{{ url_for('import_page')}}" class="pure-menu-link">IMPORT</a>
              </li>
              <li class="pure-menu-item">
                <a href="{{ url_for('get_backup')}}" class="pure-menu-link">BACKUP</a>
              </li>
            {% else %}
              <li class="pure-menu-item">
                <a href="{{ url_for('edit_page', uuid=uuid, next='diff') }}" class="pure-menu-link">EDIT</a>
              </li>
            {% endif %}
          {% else %}
            <li class="pure-menu-item">
              <a class="pure-menu-link" href="https://changedetection.io">Website Change Detection and Notification.</a>
            </li>
          {% endif %}
          {% if current_user.is_authenticated %}
            <li class="pure-menu-item">
              <a href="{{url_for('logout')}}" class="pure-menu-link">LOG OUT</a>
            </li>
          {% endif %}
          <li class="pure-menu-item pure-form" id="search-menu-item">
            <!-- We use GET here so it offers people a chance to set bookmarks etc -->
            <form name="searchForm" action="" method="GET">
              <input id="search-q" class="" name="q" placeholder="URL or Title {% if active_tag %}in '{{ active_tag }}'{% endif %}" required="" type="text" value="">
              <input name="tags" type="hidden" value="{% if active_tag %}{{active_tag}}{% endif %}">
              <button class="toggle-button " id="toggle-search" type="button" title="Search, or Use Alt+S Key" >
                {% include "svgs/search-icon.svg" %}
              </button>
            </form>
          </li>
          <li class="pure-menu-item">
            <button class="toggle-button" id ="toggle-light-mode" type="button" title="Toggle Light/Dark Mode">
              <span class="visually-hidden">Toggle light/dark mode</span>
              <span class="icon-light">
                {% include "svgs/light-mode-toggle-icon.svg" %}
              </span>
              <span class="icon-dark">
                {% include "svgs/dark-mode-toggle-icon.svg" %}
              </span>
            </button>
          </li>
          <li class="pure-menu-item">
            <a class="github-link" href="https://github.com/dgtlmoon/changedetection.io">
              {% include "svgs/github.svg" %}
            </a>
          </li>
        </ul>
      </div>
    </div>
    {% if hosted_sticky %}
      <div class="sticky-tab" id="hosted-sticky">
        <a href="https://changedetection.io/?ref={{guid}}">Let us host your instance!</a>
      </div>
    {% endif %}
    {% if left_sticky %}
      <div class="sticky-tab" id="left-sticky">
        <a href="{{url_for('preview_page', uuid=uuid)}}">Show current snapshot</a>
      </div>
    {% endif %}
    {% if right_sticky %}
      <div class="sticky-tab" id="right-sticky">{{ right_sticky }}</div>
    {% endif %}
    <section class="content">
      <header>
        {% block header %}{% endblock %}
      </header>

      {% with messages = get_flashed_messages(with_categories = true) %}
      {% if
      messages %}
        <ul class="messages">
          {% for category, message in messages %}
            <li class="{{ category }}">{{ message }}</li>
          {% endfor %}
        </ul>
      {% endif %}
      {% endwith %}
      {% if session['share-link'] %}
        <ul class="messages with-share-link">
          <li class="message">
            Share this link:
            <span id="share-link">{{ session['share-link'] }}</span>
            <img style="height: 1em; display: inline-block" src="{{url_for('static_content', group='images', filename='copy.svg')}}" >
          </li>
        </ul>
      {% endif %}
      {% block content %}{% endblock %}
    </section>
    <script src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}" defer></script>
  </body>

</html>
